<include file="public:head" />

<div class="container">

<div class="row">

<div class="col-xs-12">
  <h3>食物营养成分数据列表<small>(每100克)</small></h3>

<table id="table"></table>
</div>
</div>    

</div>

<include file="public:foot" />

<script type="text/javascript">
$("#table").bootstrapTable({ // 对应table标签的id
    url: '{:U('datalist/getdata')}', // 获取表格数据的url
    cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
    striped: true,  //表格显示条纹，默认为false
    pagination: true, // 在表格底部显示分页组件，默认false
    pageList: [10, 20], // 设置页面可以显示的数据条数
    pageSize: 10, // 页面数据条数
    pageNumber: 1, // 首页页码
    sidePagination: 'server', // 设置为服务器端分页
    search:true,
    searchOnEnterKey:13,
    strictSearch:true,
    queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
        return {
            pageSize: params.limit, // 每页要显示的数据条数
            offset: params.offset, // 每页显示数据的开始行号
            sort: params.sort, // 要排序的字段
            sortOrder: params.order, // 排序规则
            dataId: $("#dataId").val() // 额外添加的参数
        }
    },
    sortName: 'id', // 要排序的字段
    sortOrder: 'asc', // 排序规则
    columns: [
        {
            field: 'name', // 返回json数据中的name
            title: '名称', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        },
        {
            field: 'nengliang', // 返回json数据中的name
            title: '热量(大卡)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        }
        ,
        {
            field: 'danbai', // 返回json数据中的name
            title: '蛋白质(克)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        },
        {
            field: 'zhifang', // 返回json数据中的name
            title: '脂肪(克)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        },
        {
            field: 'tanshui', // 返回json数据中的name
            title: '碳水化合物(克)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        },
        {
            field: 'VC', // 返回json数据中的name
            title: '维生素C(微克)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        }
        ,
        {
            field: 'gai', // 返回json数据中的name
            title: '钙(毫克)', // 表格表头显示文字
            align: '', // 左右居中
            valign: 'middle', // 上下居中
            sortable: true
        },
        {
            field: 'id',
            title: '操作',
            align: 'center',
            formatter:function(value){
                return '<a href="">查看详情</a>';
            }
        }
    ],
    onLoadSuccess: function(){  //加载成功时执行
          console.info("加载成功");
    },
    onLoadError: function(){  //加载失败时执行
          console.info("加载数据失败");
    }

})
</script>